<template>
    <div class="main">
		<img src="../../assets/img/backicon.png" @click="back" class="backbtn" alt="">
        <h1>密码设置</h1>
		<h3>密码设置</h3>
		<div class="phones">
			<img class="phone-icon" :src="locak" alt="">
			<div class="phone-input">
				<input type="password" placeholder=" 输入密码" v-model="pwd" @blur="valipwdrule"/>
			</div>
		</div>

		<div class="pwd">
			<img class="phone-icon" :src="locked" alt="">
			<div class="phone-input">
				<input type="password" v-model="conpwd" placeholder=" 确认密码"/>
			</div>
		</div>

        <div>
            <h3 class="setnewtext">输入推荐码</h3>
            <div class="phones" style="margin-top:28px;">
                <van-password-input :class="isDefult?'ccc':'black'"
                    :value="recommend"
                    :length="6"
                    :gutter="15"
                    :mask="false"
                    :focused="showKeyboard"
                    @focus="pwdinputfocus"
                />
            </div>
            <div class="password-input-text">
                默认推荐码
            </div>
        </div>

        <!-- 数字键盘 -->
        <van-number-keyboard
            :show="showKeyboard"
            @input="onInput"
            @delete="onDelete"
            @blur="showKeyboard = false"
        />


        <div class="bottom-btn">
            <img class="regbtn" :src="canToReg?regbtn:unregbtn" alt="" @click="confirmUser">
        </div>
		


	</div>
</template>
<script>
import {_ajaxregester} from '../../service/user.js'
import {getWxCode} from '../../service/wxService'
export default {
    data(){
        return{
            locak:require('../../assets/img/unlocked.png'),
            locked:require('../../assets/img/lock.png'),
            
            tel:"",
            pwd:"",
            conpwd:"",


            canToReg:false,
			regbtn:require('../../assets/img/updatepwdconfirmed.png'),
            unregbtn:require('../../assets/img/updatepwdconfirm.png'),
            
            isDefult:true,
            recommend:"000000",
            showKeyboard:false
        }
    },
    created(){
        let tel = this.$route.query.nub;
        this.tel=tel
        try{
            getWxCode()
        }catch(e){
            
        }
    },
    activated(){
        this.tel=""
        this.pwd=""
        this.conpwd=""
    },
    watch:{
        conpwd(val){
            this.canToReg=false
            if(this.valipwd()){
                if(this.recommend.length==6){
                    this.canToReg=true
                }
            }
        }
    },
    methods:{
        back(){
            this.$router.push("/login")
        },
        valipwdrule(){
            // 6-12位
            if(this.pwd.length<6 || this.pwd.length>12){
                this.$toast.fail("密码请输入6~12个字符",)
                return false
            }else if(this.pwd.length==0){
                this.$toast.fail("密码不能为空")
                return false
            }else if(/^\d+$/.test(this.pwd))
            {
                this.$toast.fail("请输入数字和字母")
                return false
            }else if(/^[a-z]+$/i.test(this.pwd))
            {
                this.$toast.fail("请输入数字和字母")
                return false
            }else if(!/^[A-Za-z0-9]+$/.test(this.pwd))
            {
                this.$toast.fail("只能含有数字和字母")
                return false
            }
            return true
        },
        valipwd(){
            if(this.pwd!=this.conpwd){
                // this.$toast("请确认两次输入的密码是否相同")
                return false
            }
            return true
        },
        onInput(key) {
            this.recommend = (this.recommend + key).slice(0, 6);
        },
        onDelete() {
            this.recommend = this.recommend.slice(0, this.recommend.length - 1);
        },
        confirmUser(){
            let _this=this
            if(!this.canToReg){
                return
            }
            if(!this.valipwdrule()){
                return
            }
            if(localStorage.getItem("WxUserInfo")==null ||localStorage.getItem("WxUserInfo")==undefined){
                this.$toast("无微信授权")
                return
            }
            if(this.valipwd){
                this.recommend=this.recommend.length==6?this.recommend:"000000"
                _ajaxregester({
                    mobile:this.tel,
                    password:this.pwd,
                    repassword:this.conpwd,
                    invite:this.recommend,
                    openid:JSON.parse(localStorage.getItem("WxUserInfo")).openid
                }).then(res=>{
                    console.log(res)
                    _this.$toast(res.message)
                    if(res.errcode==1){
                        localStorage.setItem("user",JSON.stringify(res.data))
                        _this.$router.push("/indexs")
                    }
                })
            }else{
                this.$toast("请确认两次输入的密码是否相同")
            }
        },
        pwdinputfocus(){
            this.showKeyboard = true
            if(this.isDefult=true){
                this.isDefult=false
                this.recommend=""
            }
            

        }
    }
}
</script>
<style scoped>
    .main{
		height: 100%;
		width: 100%;
		padding-top: 100px;
    }
    .main>h1{
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: 1000;
        font-size: 18px;
        position: absolute;
        top: 15px;
        left: 139px;
    }
	.main>h3{
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
		font-size: 16px;
		margin: 0 0 0 67px;
        color: #000;
        font-weight: blod;
	}
	.phones{
		width: 100%;
		height: 30px;
		margin-top: 35px;

	}
	.pwd{
		width: 100%;
		height: 30px;
		margin-top: 26px;

	}
	.phone-icon{
		width: 11px;
		margin: 0 16px 5px 74px;
		display: inline-block;
		line-height: 32px;
	}
	input{
		background:none;  
		outline:none;  
		border:none;
        height: 30px;
        font-size: 15px;
		line-height: 30px;
		font-family: "DINPro-Bold";
        color: #000;
        caret-color:#000;
	}
	.backbtn{
		width: 9px;
		position: absolute;
		top: 24px;
		left: 18px;
	}
	.phone-input{
		display: inline-block;
		height: 35px;
		width: 205px;
		border-bottom: 1px solid #efefef;
	}
    .setnewtext{
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
		font-size: 16px;
		margin: 33px 0 0 67px;
		color: #000;
    }

	::-webkit-input-placeholder { /* WebKit browsers */
		color: rgb(204, 204, 204);
		font-size: 13px;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
		line-height: 33px;
	}

	::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
		line-height: 33px;
	}

	:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
		line-height: 33px;
	}  

    .password-info{
        display: block;
        width: 100%;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
        font-size: 10px;
        color: #ccc;
        margin: 30px 0 0 100px;
    }
    
	.regbtn{
		display: block;
        width: 340px;
        margin: 0 auto;
	}
	.more{
		width: 100%;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
		font-size: 13px;
		color: #ccc;
	}
	.more p{
		text-align: center;
	}
	.more span:nth-child(1){
		display: inline-block;
		color: #333;
		margin-left: 4px;
	}

    .password-input-text{
        width: 239px;
        margin: 40px auto;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
		font-size: 10px;
		color: #ccc;
    }
	.valibtn{
		display: inline-block;
		width: 80px;
		height: 30px;
		line-height: 30px;
		margin-bottom: 6px;
		background-color: #f5f5f5;
		float: right;
		color: #666;
		font-size: 10px;
		font-family: "PingFang SC","Microsoft YaHei";
	}



    .van-password-input{
        width: 239px;
        margin: 0 auto;
    }
    .van-password-input__security{

    }
    .van-password-input__security >li{
        border-bottom: 3px solid #ccc;
        font-family: "DINPro-Bold";
		font-size: 16px;
		
    }
    .black{
        color: #000 !important;
    }
    .ccc{
        color:#ccc !important;
    }

    @media (max-height: 812px) {
		.bottom-btn{
            width: 100%;
            display: block;
            margin: 30vh auto 0 auto;
        }
	}
	@media (max-height: 670px) {
		.bottom-btn{
            width: 100%;
            display: block;
            margin: 16vh auto 0 auto;
        }
	}
</style>